<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- meta:vp快捷键 在移动端显示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>编译的作用域</title>

</head>

<body>
  <!-- Vue实例的模板作用域 -->
  <div id="root">
    <!-- 使用的是实例里面的isShow -->
    <cpn v-show="isShow"></cpn>
    <!-- 在控制台中可以进行测试   vm.isShow = false -->

    <!-- 在模板中使用变量v-show\v-for中的names -->
    <!-- 在查找变量names的时，都看一下names变量在哪一个模板里面 -->
    <!-- 不关心现在使用使用的哪一个组件，例如：不关心cpn -->
    <cpn v-for="item in names"></cpn>
    <!-- 还是把cpn当成一个普通的div去使用 -->
  </div>
  <template id="cpn">
    <div>
      <h2>我是子组件</h2>
      <p>我是内容哈哈哈哈</p>
      <!-- 这个button是显示不出来的，因为组件里面的isShow为false -->
      <!-- 去组件里面查找变量来使用 -->
      <!-- 
      总结：
        只会在自己的作用域里面查找相关的变量、数据来使用，不会跨作用域。
        子组件中访问不了父组件。
      -->
      <button v-show="isShow">按钮</button>
    </div>
  </template>
  <script src="../js/vue.js"></script>
  <script>
    // 创建Vue实例
    const vm = new Vue({
      el: '#root',
      data: {
        message: 'Vue.js',
        // 实例中的isShow
        isShow: true
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              // 组件中的isShow
              isShow: false
            }
          }
        }
      }
    })
  </script>
</body>

</html>